<template>
    <div>
        <div>
            <div class="info"><Icon type="ios-create" />问题举报</div>
            <div class="line"></div>
        </div>
        <div>
            <table class="content" cellspacing="0" cellpadding="0">
                <tr>
                    <td colspan="5" >说明:“<span class="red">*</span>”为必填项!</td>
                </tr>
                <tr>
                    <td colspan="1" class="question">
                        <span class="red">*</span>举报问题
                    </td>
                    <td colspan="4">
                            <CheckboxGroup v-model="single">
                               <Checkbox :label="item.content" v-for="(item,index) in list" :key="index">{{item.content}}</Checkbox>
                            </CheckboxGroup>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2" class="question">举报人信息</td>
                    <td class="name">姓名</td>
                    <td class="input">
                        <Input v-model="formItem.report_name" placeholder="请输入您的姓名" style="width: 92%" />
                    </td>
                    <td class="name">身份证号码</td>
                    <td class="input">
                        <Input v-model="formItem.id_card" placeholder="请输入您的身份证号码" style="width: 92%" />
                    </td>
                </tr>
                <tr>
                    <td class="name">
                        <span class="red">*</span>验证手机号
                    </td>
                    <td class="input">
                        <Input v-model="formItem.phone" placeholder="请输入您的手机号" style="width: 92%" />
                    </td>
                    <td class="name">
                        <span class="red">*</span>验证码
                    </td>
                    <td class="input">
                        <Input v-model="value" placeholder="请输入您的验证码" style="width: 65%" />
                        <Button type="primary" class="button">获取验证码</Button>
                    </td>
                </tr>
                <tr class="reportContent">
                    <td colspan="1" class="question">
                        <span class="red">*</span>举报内容
                    </td>
                    <td colspan="4">
                        <Input v-model="formItem.report_content" :maxlength="500" show-word-limit type="textarea" placeholder="限500字" style="width: 97%" />
                        <br/>
                        <span class="surplus">剩余可输入500字</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="5" class="submit">
                        <Button type="primary" class="reset" @click="submitData(formItem)">立即提交</Button>
                        <Button class="reset" @click="handleReset(formItem)">重置</Button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
export default {
  name: 'ProjectComplaint',
  props: {
    list: {
      type: Array,
      default: () => {
        return {
          list: []
        }
      }
    },
    projectId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      single: [],
      value: '',
      formItem: {
        project_name_id: '',
        report_question: '',
        report_name: '',
        id_card: '',
        phone: '',
        report_content: ''
      }
    }
  },
  methods: {
    submitData (formItem) {
      formItem.project_name_id = this.projectId
      formItem.report_question = this.single.join(',')
      this.$emit('results', this.formItem)
    },
    handleReset () {
      this.formItem = {}
      this.single = []
    }
  }
}
</script>

<style scoped>
    .content tr td{
        border:1px #d7dde4 solid;
        height: 50px;
        font-size: 16px;
        font-weight: bold;
        color: black;
        text-indent: 0.5em;
        background-color: #F0FFF0;
    }
    .surplus{
        margin-left: 15px;
    }
    .content{
        width: 98%;
        margin-top: 10px;
        margin-left: 10px;
    }
    .red{
        color: red;
    }
    .name{
        width: 110px;
    }
    .submit{
        text-align: right;
    }
    .reset{
        margin-right: 20px;
    }
    .info{
        margin-top: 20px;
        height: 50px;
        width: 110px;
        color: white;
        font-size: 16px;
        background-color: #689ACA;
        text-align: center;
        line-height: 50px;
    }
    .line{
        height: 5px;
        width: 100%;
        background-color: #689ACA;
    }
    .question{
        width: 130px;
    }
    .button{
        margin-left: 20px;
    }
    .reportContent{
        height: 150px;
    }

</style>
